import React from 'react';
import * as utils from '../../../assets/js/utils/index';
import * as Request from '../../../services/home/details';
import UpRefresh from '../../../assets/js/libs/uprefresh';
import Css from '../../../assets/css/goods/details_reviews.css';

class GoodsDetailsReviews extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            gid: !!props.location.search ? utils.localParam(props.location.search).search.gid : '',
            aReviews: [],
            iReviewsTotal: 0
        }
        this.oUpRefresh = null;
        this.currentPage = 1;
        this.maxPage = 0;
        this.offsetBottom = 100;
    }

    componentDidMount(){
        this.getReviews();
    }

    //获取商品评价
    getReviews(){
        Request.getReviews(this.state.gid).then(res => {
            if(res.code === 200){
                this.setState({ aReviews: res.data, iReviewsTotal: res.pageinfo.total }, () => {
                    utils.lazyImg(); //图片懒加载
                });
                this.maxPage = res.pageinfo.pagenum;
                this.getScrollPage();
            }
        });
    }

    //滚动刷新商品数据
    getScrollPage(){
        const { gid } = this.state;
        this.oUpRefresh = new UpRefresh({"curPage":this.currentPage,"maxPage":this.maxPage,
        "offsetBottom":this.offsetBottom}, curPage => {
            Request.getReviews(this.state.gid, curPage).then(res => {
                if(res.code === 200){
                    const aTempReviews = utils.deepClone(this.state.aReviews);
                    const allReviews = [...aTempReviews, ...res.data];
                    this.setState({ aReviews: allReviews }, () => {
                        utils.lazyImg(); //图片懒加载
                    });
                }
            });
        });
    }
        
    componentWillUnmount(){
        //页面卸载时，重写setState,避免内存溢出
        this.setState = (state, callback) => {
            return ;
        }
    }

    render(){
        const { aReviews, iReviewsTotal } = this.state;
        return (
            //商品评价 
            <div className={Css['reviews-main']}>
                <div className={Css['reviews-title']}>商品评价（{iReviewsTotal}）</div>
                <div className={Css['reviews-wrap']}>
                    {
                        aReviews.length > 0 ? aReviews.map((item, index) => {
                            return (
                                <div key={index} className={Css['reviews-list']}>
                                    <div className={Css['userinfo']}>
                                        <div className={Css['head']}><img src={require('../../../assets/images/common/lazyImg.jpg')} data-echo={item.head} alt='' /></div>
                                        <div className={Css['nickname']}>{item.nickname}</div>
                                    </div>
                                    <div className={Css['reviews-content']}>{item.content}</div>
                                    <div className={Css['reviews-date']}>{item.times}</div>
                                </div>
                            )
                        }) : <div className='null-item'>暂无评价</div>
                    }
                </div>
            </div>
        )
    }
}

export default GoodsDetailsReviews;